<div class="abouts-service">
  <div class="row">
    <div class="col-xs-3">
      <%= render partial: 'left_menu' %>
    </div>

    <div class="col-xs-9 content-col">
      <div class="page-header">
        <h3>售后服务</h3>
      </div>

      <vue-form :state="formstate" v-model="customer" @submit.prevent="saleRecordOnSubmit">
        <validate tag="div" class="col-sm-6 form-group">
          <label for="name">姓名<span class="text-gray">（必填）</span></label>
          <input class="form-control" v-model="customer.name" required name="name" placeholder="输入您的姓名"/>
          <field-messages class="error" show="$touched || $submitted" name="name">
            <div slot="required">姓名是必填项！</div>
          </field-messages>
        </validate>

        <validate tag="div" class="col-sm-6 form-group">
          <label for="mobile">电话<span class="text-gray">（必填）</span></label>
          <input class="form-control" v-model="customer.mobile" required name="mobile" placeholder="输入真实有效的手机号" cellphone-validator/>
          <field-messages class="error" show="$touched || $submitted" name="mobile">
            <div slot="required">手机号是必填项！</div>
            <div slot="cellphone-validator">请输入正确的手机号</div>
          </field-messages>
        </validate>

        <validate tag="div" class="col-sm-12 form-group">
          <label for="address">地址<span class="text-gray">（必填）</span></label>
          <input class="form-control" v-model="customer.address" required name="address" placeholder="输入您的地址"/>
          <field-messages class="error" show="$touched || $submitted" name="address">
            <div slot="required">地址是必填项！</div>
          </field-messages>
        </validate>

        <validate tag="div" class="col-sm-6 form-group">
          <label for="job">购买日期</label>
          <input class="form-control" type="date" v-model="customer.purchase_date" name="purchase_date" placeholder="选择购买日期" style="max-height: 42px;"/>
        </validate>

        <validate tag="div" class="col-sm-6 form-group">
          <label for="job">商品编号</label>
          <input class="form-control" v-model="customer.product_no" name="product_no" placeholder="输入商品编号"/>
        </validate>

        <validate tag="div" class="col-sm-12 form-group">
          <label for="name">售后问题描述 <span class="text-gray">（需求）</span></label>
          <textarea class="form-control" v-model="customer.demand" name="demand" placeholder="尽可能详细描述您的需求">
          </textarea>
        </validate>

        <div class="col-sm-12 form-group">
          <button class="btn btn-primary">提交</button>
        </div>
      </vue-form>
    </div>
    <div class="col-xs-offset-3 col-xs-9 content-col" style="margin-top: 30px;">
      <div class="page-header">
        <h3>售后服务</h3>
      </div>
      <h4 class="text-green">全国服务热线：<%= Setting.service_phone%></h4>
      <div style="margin-bottom: 10px;">
        <strong>服务承诺：</strong>
        <div class="text-gray" style="padding-top: 10px;">五年质保     能换不修    终身无条件免费售后        免费设计上门安装</div>
      </div>
      <div style="margin-bottom: 40px;">
        <strong>服务升级：</strong>
        <div class="text-gray" style="padding-top: 10px;">服务网络遍布全国：全国拥有近300余家社区服务网点，2000余人测量安装服务团队。</div>
        <div class="text-gray" style="padding-top: 10px;">技术助力服务升级：“窗管家”等自开发手机应用，能对客户需求做出快速响应，提供了高效快捷的售后服务。</div>
        <div class="text-gray" style="padding-top: 10px;">完备售后服务体系：专业客服人员服务，及时为消费者解决难题，打造以消费者满意为核心的长效服务理念。</div>
      </div>
    </div>
  </div>
</div>
